<template>
<div class="about">
  <h2>msg: {{msg}}</h2>
  <h2>numbers[1]: {{numbers[1]}}</h2>
  <h2>person.name: {{person.name}}</h2>

  <h2>count: {{count}}</h2>
  <hr>
  <button @click="update">更新</button>
</div>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  ref,
  watch
} from "vue"

interface State {
  msg: string
  numbers: number[]
  person: {
    name?: string
  }
  update: () => void
}

export default {
  setup() {
    
    // 定义一个深度响应式对象
    const state: State = reactive({
      msg: 'haha',
      numbers: [1, 2, 3],
      person: {
        // name: 'tom'
      },
      update: () => {
        state.msg += '--'
        // 给对象添加新属性 ==> 3.0自动更新,2.0不可以
        state.person.name += '++' 
        // 通过下标直接替换数组元素  ==> 3.0自动更新,2.0不可以
        state.numbers[1] = Date.now() 

        count.value++
      }
    })

    const stateRefs = toRefs(state)

    const count = ref(0)

    // 监视一个ref
    watch(count, (newVal, oldVal) => {
      console.log('ref count变化了', newVal)
    })
    // 监视reactive中的某个属性
    watch(() => state.msg, value => {
      console.log('state中的msg变化了', value)
    })
    // 监视多个响应式数据
    watch([count, stateRefs.msg, () => state.msg], values => {
      console.log('多监视数据变化了', values)
    })

    return { // 对象中的属性和方法, 模板可以直接访问
      // state  // 模板表达式需要多写一层
      // ...state // 对象属性不是响应式的
      ...stateRefs,
      count
    }
  }
}
</script>
